<template>
  <div class="hotTeacher">
    <div class="hot">
      <div class="header" @click="toUrl('HotTechnician')">
        <div class="left">
          <img class="avatar" v-if="setStyle == 1" src="@/assets/images/hot@2x.png" alt="" />
          <p :class="setStyle == 1 ? 'title' : 'titleTwo'">{{setStyle == 1?'热门':'附近'}}{{ workerNmae }}</p>
        </div>
        <div class="icon-box">
          <i class="iconfont icon-advertise-next"></i>
        </div>
        <div class="user">
          <div class="img" v-for="(list, index) in workers" :style="{ zIndex: index, right: `${index * 15 + 20}px` }" :key="index">
            <template v-if="list.thumb">
              <img :src="list.thumb" alt="" />
            </template>
          </div>
        </div>
      </div>
      <div class="people">
        <template v-if="setStyle == 1">
          <div class="person" v-for="item in workers" :key="item.id" @click="toUrl('TechnicianDetails', { worker_id: item.id })">
            <div style="margin: 0.3rem 0 0.3rem 0;">
              <img v-if="item.thumb" :src="item.thumb" alt="" />
              <img v-if="!item.thumb" src="@/assets/images/hot@2x.png" alt="" />
            </div>
            <p style="-webkit-box-orient: vertical;">{{ item.name }}</p>
          </div>
        </template>
        <template v-if="setStyle == 2">
          <div class="personTwo" v-for="item in workers" :key="item.id" @click="toUrl('TechnicianDetails', { worker_id: item.id })">
            <div style="margin: 0.3rem 0 0.3rem 0;">
              <img v-if="item.thumb" :src="item.thumb" alt="" />
              <img v-if="!item.thumb" src="@/assets/images/hot@2x.png" alt="" />
            </div>
            <p class="textName">{{ item.name }}</p>
            <p class="loc" v-if="item.has_one_store">
              <i class="iconfont icon-order_locate"></i>
              <span>{{item.has_one_store.distance}}{{item.has_one_store.unit}}</span>
            </p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 新增样式二
    setStyle: {
      type: String,
      default: 1
    },
    workers: {
      type: null,
      default: []
    },
    workerNmae: {
      type: String
    }
  },
  data() {
    return {};
  },
  methods: {
    toUrl(str, params) {
      if(this.setStyle == 2){
        this.$router.push(this.fun.getUrl(str, params,{setStyle:this.setStyle}));
        return
      }
      this.$router.push(this.fun.getUrl(str, params));
    }
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {}
};
</script>
<style lang="scss" scoped>
.hot {
  margin: 1.31rem 0.78rem;
  position: relative;
}

.header {
  display: flex;
}

.icon-box {
  flex: 1;
  text-align: right;
  align-self: center;
}

.left {
  display: flex;

  .avatar {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5rem;
    color: #000;
  }
  .titleTwo {
    font-size: 1.13rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #000;
  }
}

.user {
  .img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    background: #f2f2f2;
    position: absolute;

    /* bottom: 20px; */
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.people {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 0 0 0.3rem;
  .personTwo {
    margin-top: 1rem;
    padding: 1.5rem 0 1.06rem 0;
    flex: 1;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 0.563rem 0 rgba(169, 169, 169, 0.24);
    border-radius: 0.781rem;
    display: flex;
    flex-direction: column;
    color: #000;
    margin-right: 0.59rem;
    img {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
    }
    .textName {
      -webkit-box-orient: vertical;
      font-size: 0.88rem;
      margin-bottom: 0.53rem;
    }
    .loc {
      font-size: 0.75rem;
      color: #999999;
      line-height: 0.94rem;
    }
  }
  .person {
    padding: 1rem 0 0 0;
    flex: 1;

    /* width: 5.031rem; */
    height: 7.156rem;
    background-color: #fff;
    box-shadow: 0 0 0.563rem 0 rgba(169, 169, 169, 0.24);
    border-radius: 0.781rem;
    display: flex;
    flex-direction: column;
    color: #000;
    margin-right: 0.5rem;

    img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
    }
  }
}
</style>
